<!--微信小程序配置-->
<template>
  <div id="wechatMiniConfig" class="app-container">
    <div class="common-title m-b-20 p-l-10"><h2 class="bold">微信小程序服务配置</h2></div>
    <el-form :model="listQuery" :inline="true" class="p-l-10">
      <el-form-item>
        <application-key-select ref="applicationKeySelect" v-model="listQuery.appId" :type="listQuery.type" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" plain @click="handleCreate">新增</el-button>
        <el-button type="danger" icon="el-icon-delete" plain @click="handleRemove">删除</el-button>
      </el-form-item>
    </el-form>
    <div class="container">
      <el-form
        ref="form"
        :model="configRecords"
        :rules="rules"
        label-width="200px"
        class="common-form-with-desc">
        <el-form-item label="名称:" prop="name">
          <el-input v-model="configRecords.name" placeholder="请输入小程序名称" maxlength="50" show-word-limit clearable />
        </el-form-item>
        <el-form-item label="AppId:" prop="appId">
          <el-input v-model="configRecords.appId" placeholder="请输入小程序AppId" maxlength="50" />
        </el-form-item>
        <el-form-item label="AppSecret:" prop="appSecret">
          <el-input v-model="configRecords.appSecret" placeholder="请输入小程序AppSecret" maxlength="50" />
        </el-form-item>
        <el-form-item label="描述:" prop="remark">
          <el-input v-model="configRecords.remark" :rows="4" placeholder="请输入小程序描述" maxlength="200" show-word-limit type="textarea" />
        </el-form-item>
        <el-form-item label="微信配置相关信息:" prop="desc">
          <span>
            <label>AppId：</label>
            <copy-text :content="configRecords.appId" position="left" />
            <br>
            <label>AppSecret：</label>
            <copy-text :content="configRecords.appSecret" position="left" />
          </span>
        </el-form-item>
        <el-form-item>
          <el-button :loading="buttonLoading" type="primary" @click="status==='create'?createData():updateData()">配置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import applicationKeySelect from '../applicationKeySelect'

export default {
  components: { applicationKeySelect },
  data() {
    return {
      typeEnum: 'APPLICATION_TYPE_WX_MP',
      listQuery: {
        appId: '',
        type: 2
      },
      buttonLoading: false,
      configRecords: {
        id: '',
        photo: '',
        name: '',
        appId: '',
        appSecret: '',
        remark: '',
        type: ''

      },
      rules: {
        name: [
          { required: true, message: '请输入微信小程序名称', trigger: 'blur' }
        ],
        appId: [
          { required: true, message: '请输入微信小程序APP_ID', trigger: 'blur' }
        ],
        appSecret: [
          { required: true, message: '请输入微信小程序密钥', trigger: 'blur' }
        ]

      }
    }
  },
  watch: {
    'listQuery.appId': function(val) {
      this.getWechatConfig()
    }
  },
  created() {
  },
  methods: {

    async getWechatConfig() {
      const response = await this.$store.dispatch('applicationKeyConfigGetByAppId', this.listQuery.appId)
      if (response == null) {
        this.$modal.msgWarning('请先配置相关信息！')
        return
      }
      this.status = 'update'
      this.configRecords = response
    },
    handleCreate() {
      this.status = 'create'
      this.configRecords = {}
    },
    createData() {
      this.buttonLoading = true
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.configRecords.applicationTypeEnum = this.typeEnum

          this.$store.dispatch('applicationKeyConfigSave', this.configRecords).then(response => {
            this.buttonLoading = false
            this.$modal.msgSuccess('配置成功')
            this.$refs.applicationKeySelect.refresh()
          }).catch(() => {
            this.buttonLoading = false
          })
        }
      })
    },
    updateData() {
      this.buttonLoading = true
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.configRecords.applicationTypeEnum = this.typeEnum
          this.$store.dispatch('applicationKeyConfigUpdate', this.configRecords).then(response => {
            this.buttonLoading = false
            this.$modal.msgSuccess('配置成功')
            this.$refs.applicationKeySelect.refresh()
          }).catch(() => {
            this.buttonLoading = false
          })
        }
      })
    },
    handleRemove() {
      this.$refs.applicationKeySelect.remove()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" >
#wechatMiniConfig {
  background: #fff;
  .container{
    height: 100%;
    overflow-y: auto;
    background: #fff;
    padding: 30px 36px 10px 36px;
  }
}
</style>
